<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LED数字</title>
    <script src="../js/vue.js"></script>
    <link rel="stylesheet" href="../css/led.css" />
    <style>
        body {
            background-color: #000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
        }

       .circle {
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background-color: red;
            transform: translateY(-0px);
        }

       .time-container,
       .date-container {
            display: flex;
            align-items: center;
            justify-content: center;
        }

       .date-container {
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="time-container">
            <template v-for='(i, index) in time'>
                <my-led :value='i'></my-led>
                <span v-if='index == 1 || index == 3' class="circle"></span>
            </template>
        </div>
        <div class="date-container">
            <template v-for='(i, index) in date'>
                <my-led :value='i'></my-led>
                <span v-if='index == 3 || index == 5' class="circle"></span>
            </template>
        </div>
    </div>
    <script src="../js/led.js"></script>
    <script>
        Vue.createApp({
            components: {
                'my-led': Led
            },
            data() {
                return {
                    date: [0, 0, 0, 0, 0, 0, 0, 0],
                    time: [0, 0, 0, 0, 0, 0]
                };
            },
            created() {
                setInterval(this.getTime, 1000);
            },
            methods: {
                getTime() {
                    var now = new Date();
                    let h = now.getHours();
                    let m = now.getMinutes();
                    let s = now.getSeconds();
                    this.time[0] = parseInt(h / 10);
                    this.time[1] = parseInt(h % 10);
                    this.time[2] = parseInt(m / 10);
                    this.time[3] = parseInt(m % 10);
                    this.time[4] = parseInt(s / 10);
                    this.time[5] = parseInt(s % 10);

                    let year = now.getFullYear();
                    let month = now.getMonth() + 1;
                    let day = now.getDate();
                    this.date[0] = parseInt(year / 1000);
                    this.date[1] = parseInt((year % 1000) / 100);
                    this.date[2] = parseInt((year % 100) / 10);
                    this.date[3] = parseInt(year % 10);
                    this.date[4] = parseInt(month / 10);
                    this.date[5] = parseInt(month % 10);
                    this.date[6] = parseInt(day / 10);
                    this.date[7] = parseInt(day % 10);
                }
            }
        }).mount('#app');
    </script>
</body>

</html>    